<style>
#sixteen {
	width: 33px;
	height: 33px;
	background-color: #000000;
	z-index: -1;
	opacity: 0.5;
	filter: alpha(opacity=50);
	position: absolute;
}
.attachToMe {
	width: 100px;
	height: 100px;
	border: 1px solid #ff0000;
	background-color: #ffdddd;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-o-border-radius: 50px;
	border-radius: 50px;
	z-index: 1;
	position: absolute;
	bottom: 106px;
	right: 106px;
}
.tip-wrap {
	height: 130px;
	width: 130px;
	border: 1px solid #0000ff;
	background-color: #ddddff;
	font-family: sans-serif;
	font-size: 12px;
}
</style>

<p>In the lower right corner you should see a semi-transparent red circle (or square). Moving your cursor around in there should make a tooltip appear at the corners of the black square following your pointer.</p>

<div id="sixteen"></div>
<div class="attachToMe"></div>

<script src="/depender/build?require=More/Tips"></script>
<script>
window.addEvent('load', function(){

	$(document.body).setStyle('height', window.getHeight());

	var attachTo = $$('.attachToMe').inject(document.body);

	var tips = this.tips = new Tips(attachTo, {
		offset: {x: 16, y: 16},
		windowPadding: {x: 10, y: 10}
	});

	var sixteen = document.id('sixteen').inject(document.body);
	$(document.body).addEvent('mousemove', function(event){
		sixteen.setStyles({
			top: event.page.y - 16,
			left: event.page.x - 16
		});
	});

});
</script>
